<template>
  <div class="detail">
    <el-card>
      <!-- 打印按钮 -->
      <el-button @click="toPrint">打印页面</el-button>
      <!-- 导航 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="登录账户设置" name="first">
          <!-- 内容 -->
          <el-form :model="form" label-width="100px">
            <el-form-item label="姓名">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitData">更新</el-button>
              <el-button @click="$router.back(-1)">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人详情" name="second">
            <userinfo></userinfo>
        </el-tab-pane>
        <el-tab-pane label="岗位信息" name="third">
            <jobinfo></jobinfo>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
// 导入接口
import { getBaseInfo, updateBaseInfo } from '@/api/employees'
export default {
  name: 'detail',
  data () {
    return {
      activeName: 'first',
      form: {
        username: '',
        password: ''
      },
      id: this.$route.params.id, // 用户id
    }
  },
  methods: {
    //   获取用户基本信息
    async getEmployeesInfo () {
      let res = await getBaseInfo(this.id)
      //   console.log(res)
      // 保存信息
      this.form = { ...res.data.data }
    },
    // 更新数据
    async submitData () {
      try {
        // 发请求
        await updateBaseInfo(this.form)
        // 更新成功提示
        this.$message.success('员工基本信息更新成功')
        // 跳转员工列表页
        this.$router.push('/employees')
      } catch (error) {
        console.log('出错了')
      }
    },
    // 跳转打印页面
    toPrint(){
      this.$router.push(`/employees/print/${this.id}?type=${this.activeName}`)
    }
  },
  created () {
    //   调用方法
    this.getEmployeesInfo()
  },
  components: {
      userinfo: () => import('../components/user-info.vue'),
      jobinfo: () => import('../components/job-info.vue'),
  }
}
</script>

<style lang="scss">
.detail {
  .el-card {
    margin: 20px;

    .el-form {
      width: 40%;
      margin: 30px 0px 40px 280px;
    }
  }
}
</style>
